import React, { Component } from "react"
import fetchData from '../../util/fetch'


class CityPlan extends Component {
	constructor(props) {
		super(props)
		this.state = {
			city: {},
			homeList: [],
			home: []
		}
	}
	
	addHomeList = (page) => {
		console.log(page)
		const { home, homeList } = this.state;
		let addList = home.slice(page, page + 6);
		this.setState({
			homeList: homeList.concat(addList)
		})
	}
	
	
	getData(url, opts) {
		fetchData(url, opts, function (res) {
			let data = eval(res.data)
			switch (opts.str) {
				case '6-1':
					this.setState({
						city: data
					});
					break;
				case '6-1-1':
					this.setState({
						home: data,
						homeList: data.slice(0, 5)
					});
					break;
			}
		}.bind(this))
	}

	getBannerData(url,opts){
		fetchData(url,opts,function(res){
			let data = eval(res.data);
			this.setState({
				banner : data
			});
		}.bind(this));
	}
	
	componentWillMount() {
		//banner类型 1首页、2hibaby服务、3美研中心、4活动咨询、5新妈分享、6关于Hibaby
		this.getBannerData('/crm/api/v1/web/banner/findOneByType',{"dataId": 7});
		//6-1 城市布局标题
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "6-1" });
		//6-1-1 城市布局列表
		this.getData('/crm/api/v1/web/news/findListByType', { "str": "6-1-1" });
	}
	
	render() {
		const { city, homeList } = this.state;
		const page = homeList.length;
		console.log(homeList,'???')
		return (
			<div className="cityPlan">
				<div className="service-banner"><img src={this.state.banner?this.state.banner.imgUrl:null}/></div>
				<div className="city">
					<h2>{city.title}<span></span></h2>
					<div className="cityList">
						{
							homeList.map((v, k) => {
								return (
									<div key={k} className="cityBox">
										<img src={v.img1Url} />
										<h4>{v.title}</h4>
										<div className="cityTop">
											<h3>{v.title}</h3>
											<div dangerouslySetInnerHTML={{ __html: v.content}}></div>
										</div>
									</div>
								)
							})
						}
						
						<div className="cityBox lastCity">
							<a onClick={() => {
								this.addHomeList(page)
							}} className="more-city">MORE+</a>
						</div>
						<div className="city-padding"></div>
					</div>
				</div>
			</div>
		)
	}
}
export default CityPlan;
